<template>
	<div>
		<!-- <family-template1 v-if="team_tempalte && loading"></family-template1> -->
		<div class="home-wrap" v-if="loading">
			<div class="topTitle flex">
				<a href="/" class="logo">
					<h1 v-if="!is_official">1234TV投教平台</h1>
					<h1 v-else>名师课堂</h1>
				</a>
				<div class="fract flex">
					<span class="ell">{{user.nickname}}</span>
					<router-link to="/login" v-if="!user.logined">登录</router-link>
					<a href="javascript:;" @click="loginOut" v-else>退出</a>
				</div>
			</div>
			<div class="halllist">
				<div class="h_title">
					<h2>热门推荐</h2>
					<router-link class="more-list" to="/moreRoomList">更多</router-link>
				</div>
				<div class="room-list-ul">
					<ul class="fix">
						<li v-for="(item,index) in roomList" :key="index">
							<router-link :to="{name:'room',params:{eng_name:item.eng_name,roomid: item.room_id }}" class="img" :class="{'has-pasword' : item.password}">
								<i class="password_bg" v-if="item.password"></i>
								<img class="lazy" :data-src="item.room_img | roomDefault" :src="lazyload">
								<p class="txt fix">
									<template v-if="item.room_qualification">
										<b class="v m" title="实名认证" v-if="item.room_qualification === 1">实名</b>
										<b class="v" title="机构认证" v-else>认证</b>
									</template>
									<span class="name room_name ell">{{item.room_name}}</span>
								</p>
								<p class="txt fix">
									<span class="fl live live_color" v-if="item.is_live"><b class="red_dot_bg"></b>在线中</span>
									<span class="fl c222" v-else><b class="gray_dot_bg"></b>休息中</span>
									<span class="fr ell people-number" v-if="item.sum_users"><i></i>{{item.sum_users}}人</span>
								</p>
							</router-link>
						</li>
					</ul>
					<div class="loading" v-show="tips">全部加载完咯</div>
					<div class="loading" v-show="listLoading"><img src="@/assets/images/loading.gif" alt="" class="loading-img"/><span>玩命加载中...</span></div>
				</div>
			</div>
		</div>
		<bind-tips></bind-tips>
		<list-skeleton-loading v-if="!loading"></list-skeleton-loading>
		<back-to-top></back-to-top>
	</div>
</template>

<script>
	import {getHallInfo,getRoomList} from '@/api/hall'
	import ListSkeletonLoading from '@/components/SkeletonLoading/listLoading'
	import familyTemplate1 from '@/views/family_hall/template1'
	import Swiper from '@/components/Swiper'
	import {customLazyLoad} from '@/utils'
	import {mapGetters} from 'vuex'
	import bindTips from '@/views/bind_phone'
	import mixin from '@/mixins/removeLoading'
	import roomDefaultSrc from '@/assets/images/default/room-icon-default.jpg'
	import BackToTop from '@/components/BackToTop'
	export default{
		name:'home',
		components:{
			Swiper,
			familyTemplate1,
			bindTips,
			ListSkeletonLoading,
			BackToTop
		},
		mixins: [mixin],
		filters:{
			roomDefault(img){
				if(!img){
					let roomDefaultSrc = !window.is_official ? require('@/assets/images/default/room-icon-default.jpg') : require('@/assets/images/deticateIp/room-default-over.jpg')
					return roomDefaultSrc
				}else{
					return img
				}
			}
		},
		metaInfo: {
		  title: '1234tv首页',
			meta: [{
		    name: 'keywords',
		    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
		  },{
				name: 'description',
				content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
			}],
		},
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		data(){
			return{
				roomList:[],
				team_tempalte:undefined,
				loading:false,
				tips:false,
				listLoading:false,
				lazyload: !window.is_official ? require('@/assets/images/default/lazyload.jpg') : require('@/assets/images/deticateIp/official-lazyload.png'),
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false
			}
		},
		created(){
			getHallInfo().then(res=>{
				this.team_tempalte = res.data.team_template
				this.loading = true
				return res.data.team_template
			}).then(res=>{
				if(res === 0){
					let pageSize = 30
					this.listLoading = true
					getRoomList({page:1,pageSize:pageSize,official_more:0}).then(response=>{
						this.listLoading = false
						this.roomList = response.data.data
						this.tips = true
						this.$nextTick(()=>{
							customLazyLoad('.lazy')
						})
					})
				}
			})
		},
		methods:{
			loginOut(){
				this.$store.dispatch('LogOut').then(res=>{
					if(localStorage.getItem("noalertbind_"+this.user.uid)){
						localStorage.removeItem("noalertbind_"+this.user.uid)
					}
					location.reload()
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>
<style lang="scss">
	@import '@/styles/hall.scss';
	.alert-bind-a{
		margin-top: 1.25rem;
		color:#69707f;
		font-size: 0.87rem;
		text-decoration: underline;
	}
</style>
